<template>
  <div class="goods">
    <!-- 分类列表 -->
    <!-- 3.用ref是单纯的想拿到这个元素 -->
    <div class="menu-wrapper" ref="menuScroll">
      <ul>
        <!-- 等于第一个的时候就是黄色 点击的功能在这里~~-->
        <li class="menu-item" :class="{'current':currentIndex === 0}" @click="selectMenu(0)">
          <p class="text">
            <img :src="container.tag_icon" v-if="container.tag_icon" class="icon" />
            {{container.tag_name}}
          </p>
        </li>
        <!-- 点击的功能在这里~~-->
        <li
          :class="{'current':currentIndex === index+1 }"
          v-for="(item,index) in goods"
          :key="index"
          class="menu-item"
          @click="selectMenu(index+2)"
        >
          <p class="text">
            <img :src="item.icon" v-if="item.icon" class="icon" />
            {{item.name}}
            <!-- 展示数量 当这里只累加到一个上面的时候要给父级加position:relative-->
            <i class="num" v-show="calulateCount(item.spus)">{{calulateCount(item.spus)}}</i>
          </p>
        </li>
      </ul>
    </div>

    <!-- 商品列表 -->
    <div class="foods-wrapper" ref="foodScrooll">
      <ul>
        <!-- 专场 -->
        <li
          class="container-list food-list-hook"
          v-for="(item,index) in container.operation_source_list"
          :key="index"
        >
          <div>
            <img :src="item.pic_url" alt />
          </div>
        </li>
        <!-- 具体分类 -->
        <li class="foods-list food-list-hook" v-for="(item,index2) in goods" :key="index2+'info'">
          <h3 class="title">{{item.name}}</h3>
          <!-- 具体的商品的列表 -->
          <ul>
            <li @click="showDetail(food)" v-for="(food,index1) in item.spus" :key="index1">
              <div class="picture">
                <img :src="food.picture" class="img" />
              </div>
              <!-- <img :src="food.picture" /> -->
              <div class="content">
                <h3 class="name">{{food.name}}</h3>
                <p class="desc" v-if="food.description">{{food.description}}</p>
                <div class="extra">
                  <span class="saled">{{food.month_saled_content}}</span>
                  <span class="praise">{{food.praise_content}}</span>
                </div>
                <img :src="food.product_label_picture" class="product" />
                <p class="price">
                  <span class="text">{{food.min_price}}</span>
                  <span class="unit">/{{food.unit}}</span>
                </p>
                <!-- carControl -->
                <div class="carControl">
                  <car-control :food="food"></car-control>
                </div>
              </div>

              <!-- cartControl -->
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- 购物车 -->
    <div class="shopCart">
      <shop-cart :poiInfo="poiInfo" :selectFoods="selectFoods"></shop-cart>
    </div>
    <!-- 商品详情 -->
    <app-product :food="selectFood" ref="foodView"></app-product>
  </div>
</template>
<script>
import axios from "axios";
import shopCart from "./../shopCart/shopCart.vue";
import carControl from "./../  cartControl/carControl.vue";
import appProduct from "./../appProduct/appProduct.vue";
// 想要使用页面滚动 1.安装npm install better-scroll --save
// 2.引入import BScroll from "better-scroll";
// 3.看上面的3~~~ 4.看下面！！！5.也在下面呐~~~~

import BScroll from "better-scroll";
export default {
  components: {
    shopCart: shopCart,
    carControl: carControl,
    appProduct: appProduct
  },
  data() {
    return {
      // object用对象来装，数组的数据用数组来装
      container: {},
      goods: [],
      poiInfo: {},
      listHeight: [],
      menuScroll: {},
      foodScroll: {},
      scrollY: 0,
      selectFood: {}
    };
  },
  // 注意计算属性是不能接受参数的
  // computed: {
  //   head_bgc
  // },
  methods: {
    // 这里是计算左侧数量的方法
    calulateCount(spus) {
      let count = 0;
      spus.forEach(food => {
        if (food.count > 0) {
          count += food.count;
        }
      });
      return count;
    },
    selectMenu(index) {
      // console.log(index);
      let foodlist = this.$refs.foodScrooll.getElementsByClassName(
        "food-list-hook"
      );
      // 拿到带有food-list-hook的每行
      let element = foodlist[index];
      // console.log(element);
      // 这里的scrollToElement是better-scroll的一个方法 能跳转到指定的位置
      this.foodScroll.scrollToElement(element, 250);
    },
    head_bgc(imgName) {
      // console.log(imgName);
      return "background-image:url(" + imgName + ")";
    },
    showDetail(food) {
      // console.log(food);
      this.selectFood = food;
      this.$refs.foodView.showView();
    },
    // 这里是第四步,并且拿到上面的元素
    initScroll() {
      this.menuScroll = new BScroll(this.$refs.menuScroll);
      this.foodScroll = new BScroll(this.$refs.foodScrooll, {
        probeType: 3
      });
      // 第3步监听滚动位置 监听函数,watch是用来监听变量的，on是用来监听事件的
      this.foodScroll.on("scroll", pos => {
        // 要加入probeType，默认是0 加上才生效
        // console.log(pos.y);
        // Math.abs是取绝对值的意思，Math.round() 函数返回一个数字四舍五入后最接近的整数
        this.scrollY = Math.abs(Math.round(pos.y));
        // console.log(this.scrollY);
      });
    },

    // 计算高度的方法『第2步』
    calulateHeight() {
      // 这里通过foodScrooll找到food-list-hook下的所有的food-list-hook
      let foodlist = this.$refs.foodScrooll.getElementsByClassName(
        "food-list-hook"
      );
      // console.log(foodlist);
      let height = 0;
      this.listHeight.push(height);
      for (let i = 0; i < foodlist.length; i++) {
        let item = foodlist[i];
        // console.log(item);
        // 累加高度 clientHeight获取屏幕可视化高度（获取item的高度）
        height += item.clientHeight;
        this.listHeight.push(height);
      }
      // this.listHeight拿到所有的高度
      // console.log(this.listHeight.length);
    }
  },
  created() {
    axios
      .get("/api/goods")
      .then(res => {
        // console.log(res.data);
        return res.data;
      })
      .then(response => {
        // console.log(response.data);
        // console.log(response);
        if (response.code == 0) {
          this.container = response.data.container_operation_source;
          this.goods = response.data.food_spu_tags;
          this.poiInfo = response.data.poi_info;
          // console.log(this.poiInfo.shipping_fee_tip);
          // console.log(this.container);
          // console.log(this.goods);
          // 这里是第五步 执行滚动方法 this.initScroll()
          // dom已经渲染才执行下面东西
          this.$nextTick(() => {
            this.initScroll();
            // 发生滚动的时候会与左边栏一一对应
            // a.计算分类区间的高度
            // b.监听滚动的位置
            // 第1步 问题解决 当我们的js方法执行完的时候，
            // 但是我们的dom还没有渲染完所以要用到this.$nextTick()
            this.calulateHeight();
          });
        }
      });
  },
  //   在一个计算属性中可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果即可。

  // 计算属性还可以依赖多个Vue实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新。

  computed: {
    // 第4步 跟左侧的进行一个对接（这里的已经绑定到:class上了）
    currentIndex() {
      // listHeight.length = 12
      for (let i = 0; i < this.listHeight.length; i++) {
        // 获取商品区间的范围
        let height1 = this.listHeight[i];
        let height2 = this.listHeight[i + 1];
        // console.log(listHeight.length);
        // 是否在上述区间中
        if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
          // console.log(i);
          return i;
        }
      }
      return 0;
    },
    // 这里是为carControl.vue写的 需要传递到carControl.vue
    selectFoods() {
      let foods = [];
      this.goods.forEach(myfoods => {
        myfoods.spus.forEach(food => {
          if (food.count > 0) {
            foods.push(food);
          }
        });
      });
      return foods;
    }
  }
};
</script>
<style lang='less' scope>
// .foods-list .title {
//   position: relative;
//   top: -300px;
//   left: 0;
//   color: red !important;
// }
.goods {
  display: flex;
  position: absolute;
  top: 190px;
  bottom: 51px;
  overflow: hidden;
  width: 100%;
  .menu-wrapper {
    // 当子元素都设置为1时表示平均分配剩余空间 flex:1 默认值为0表示不占有剩余空间
    // 第二个的意思是跟随屏幕缩小的，1的时候才生效
    // 第三个是设置占据的空间 注意！后两个是可以选择的。
    flex: 0 0 85px;
    background-color: #f4f4f4;
    z-index: 2;
    .menu-item {
      padding: 10px 10px;
      // font-size: 12px;
      border-bottom: 1px solid rgb(165, 158, 158);

      .text {
        font-size: 13px;
        color: #000;
        line-height: 17px;
        vertical-align: middle;
        -webkit-line-clamp: middle;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        .icon {
          float: left;
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .foods-wrapper {
    flex: 1;
    // background-color: pink;
    color: #000;
    .container-list {
      height: 83px;
      padding: 11px 11px 0 11px;
      border-bottom: 1px solid #e4e4e4;
      overflow: hidden;
    }
    .container-list img {
      width: 100%;
      margin-bottom: 11px;
      border-radius: 5px;
    }
    .foods-list {
      .picture {
        width: 100px;
        height: 10px;
        .img {
          float: left;
          width: 120px;
          height: 120px;
        }
      }
    }
    // .container-list {
    //   position: absolute;
    //   top: 0;
    //   left: 0;
    // }
  }
}
.current {
  background-color: yellow !important;
  font-weight: bold;
  margin-top: -1px;
}
.content {
  position: relative;
  .carControl {
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.product {
  width: 10px;
  height: 10px;
}
.num {
  color: red;
  width: 50px;
  height: 50px;
  font-size: 20px;
}
</style>
